<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>菜单</title>
		<style type="text/css">
			ul {
				float: left;
				width: 100%;
				padding: 0;
				margin: 0;
				list-style-type: none;
			}
			
			a {
				float: left;
				width: 7em;
				text-decoration: none;
				color: white;
				background-color: green;
				padding: 0.2em 0.6em;
				border-right: 1px solid white;
			}
			
			li {
				display:inline; /*display:inline 的作用是设置对象做为行内元素显示*/
			}
			
			/*将同时有 href和title属性的HTML超链接的文本设置为红色*/
			a[href][title] {
				color:red;
			}
			
			p.important {/*等价于p[class="important"]*/
				background-color: gray;
			}
			
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
			<li><a href="#">Item 5</a></li>
		</ul>
		
		<br/>
	
		<p class="important">Test test test</p>
	</body>
</html>